<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script type="text/javascript" src="/static/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
    <link href="/static/bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            background: linear-gradient(to right, #a8a8e7, #2f5af1);
        }
        .div1 {
            width: 30%; min-height: 400px;
            margin-left: 33%; margin-top: 100px;
            background: url('/static/login_back.jpeg');background-size: cover;
             box-shadow: 4px 4px  8px #2d2c2c; border-radius: 6px;
            color: white;padding-top: 30px;
        }
        span{
            padding-left: 5%; font-size: xx-small;
        }

        input{
            border-radius: 20px;  width: 100%; height: 35px;
            border: 0; background:rgba(255,255,255,0.3) ;
            padding-left: 5%;
        }

    </style>
</head>
<body>

    <div class="div1" >
        <ul class="nav nav-tabs" style="padding-left: 40%" >
            <li class="active">
                <a href="#in" data-toggle="tab">登陆</a>
            </li>
            <li >
                <a href="#up" data-toggle="tab">注册</a>
            </li>
        </ul>
        <div class="tab-content" style="padding-top: 30px;width: 80%;margin-left: 10%">
            <div class="tab-pane active" id="in" >
                <span >用户名</span>
                <br>
                <input type="text" autocomplete="off" id="in_username">
                <br><br>
                <span>密码</span>
                <br>
                <input type="password" autocomplete="new-password" id="in_password">
                <br><br>
                <a href="#fg_pwd" data-toggle="tab" style="font-size: xx-small;float: right;margin-right: 20px;color: white">忘记密码</a>
                <br><br><br>
                <button onclick="sign_in_or()" class="btn bg-danger" style="border-radius: 20px;width: 100%;background-color: #00b3ee">登陆</button>
                <br><br><br>
                <script>
                    function sign_in_or(){
                        $.post('/sign_in/',{
                            'in_username': document.getElementById('in_username').value,
                            'in_password': document.getElementById('in_password').value
                        },function (ret){
                            if(ret == '001'){
                                document.location.href='/project_list/'
                            }else{
                                alert('用户名或密码错误')
                            }
                        })
                    }
                </script>
            </div>

            <div class="tab-pane" id="up">
                <form action="/sign_up/">
                    <span >用户名</span>
                    <br>
                    <input type="text" autocomplete="off" name = 'up_username'>
                    <br><br>
                    <span>密码</span>
                    <br>
                    <input type="password" autocomplete="new-password" id="up_password" name="up_password">
                    <br><br>
                    <span >确认密码</span>
                    <br>
                    <input type="password" autocomplete="new-password" id="up_two_password" name="up_two_password" onblur="check_pwd()">
                    <br><br>
                    <span>邮箱</span>
                    <br>
                    <input type="text" autocomplete="off" name="up_email">
                    <br><br><br>
                    <button class="btn btn-danger" id="sign_up"disabled style="border-radius: 20px;width: 100%;background-color: #00b3ee">注册</button>
                    <br><br><br>
                </form>
            </div>

            <div class="tab-pane" id="fg_pwd">
                <form action="/forget_pwd/">
                    <span >用户名</span>
                    <br>
                    <input type="text"  autocomplete="off" id="fg_username" name="fg_username" >
                    <br><br>
                    <span>验证码</span> <button onclick="send_email()" type="button" style= "color: black; float: right"  >发送验证码</button>
                    <input type="text" autocomplete="off" name="fg_code">
                    <br><br>
                    <span>新密码</span>
                    <br>
                    <input type="text" autocomplete="off" name="fg_password">
                    <br><br>
                    <button class="btn bg-danger" style="border-radius: 20px;width: 100%;background-color: #00b3ee">确认修改</button>
                    <br><br><br>
                </form>
            </div>

        </div>
    </div>
    <script>
        function check_pwd(){
            var up_password = document.getElementById('up_password').value
            var up_two_password = document.getElementById('up_two_password').value
            if (up_password != up_two_password){
                alert('两次输入的密码不一致，请重新输入')
                document.getElementById('sign_up').disabled = true
            }
            else{
                document.getElementById('sign_up').disabled = false
            }
        }
        function send_email(){
            $.get("/send_email_code", {
                    {#多个值用 ，隔开#}
                    "fg_username": document.getElementById('fg_username').value
                    {#windows.print(username)#}
                },
                function (ret){
                    if (ret == 'yes'){
                        alert('发送成功')
                    }else{
                        alert('发送失败')
                    }
                })
        }

    </script>
</body>
</html>